<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* input[name] {
            width: 30px;
            height: 30px;
        } */
        /* input[type="checkbox"] {
            width: 30px;
            height: 30px;
        } */
        /* input[class^="icon"] {
            width: 30px;
            height: 30px;
        } */
        /* input[class$="dan"] {
            width: 30px;
            height: 30px;
        } */
        input[class*="d"] {
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- 
        css3新增伪类选择器
        :first-child
        :last-child
        :nth-child(n)
        even基数  odd偶数
        .box nth:child(even) {  }
        (n) 中的n 可以是公式 从0开始一直递增
        2n  2n+1 5n n+5 -n+5
        超过元素个数会被忽略

        E:first-of-type 指定类型E的第一个
        p:first-of-type {  }
        :last-of-type{  }
        :nth-of-type(n){  } 会忽视其他同级内的其他类型标签
    -->

    <!-- 
        伪元素选择器
        h5标准双冒号
        伪元素只能给双标签添加
        伪元素里面必须写上content:“”
        before和after 创建的是行内元素  display: block;
        E::before 在E元素内部前面插入一个元素
        E::after 在E元素内部后面插入一个元素

        E::first-letter 选择到了E容器的第一个字母
        E::first-line ```第一行文本
    -->

    <!-- 
        属性选择器
        E[att] 选择具有att属性的E元素
        E[att="val"] 选择具有att属性值且值为val的E元素
        E[att^="val"] 匹配具有att属性且值为val开头的E元素
        E[att$="val"] 匹配具有att属性且值以val结尾的E元素
        E[att*="val"] 匹配具有att属性且值中含有val的E元素

        input[name]{ }
    -->
    
    <!-- 
        选择器权重
        基础：id > class > tag > *
        伪类选择器 属性选择器 权重等于类选择器
        伪元素选择器 权重等于标签选择器
    -->
    <p>
        <input type="radio" name="sex" class="icon-dan"> male
        <input type="radio" name="sex" class="icon-dan"> female
    </p>
    <p>
        <input type="checkbox" class="icon-duo"> 运动
        <input type="checkbox" class="icon-duo"> 代码
    </p>
    <p>
        <input type="button" value="按钮">
        <input type="button" value="提交按钮">
    </p>
</body>
</html>